<style lang="scss" scoped>
  .nav-wrap{
    position: relative;
    width: 100%; height: 70px;
    overflow: hidden;
  }

  .nav-icon{
    float: left;
    width: 31px; height: 31px;
    margin: 19px 19px auto 19px;
  }

  .nav-title{
    float: left; height: 28px;
    line-height: 28px;
    color:rgba(0,0,0,0.87);
    font-size: 20px;
    margin-top: 21px;
  }

  .nav-btn{
    float: right;
    width:80px;
    height:30px;
    background:rgba(0,0,0,1);
    border-radius:5px;
    margin-right: 10px;
    margin-top: 20px;
    color: #fff;
    font-size: 12px;
    line-height: 30px;
    text-align: center;
  }
</style>

<template>
  <div class="nav-wrap">
    <img src="" class="nav-icon">
    <div class="nav-title">装裱大师商户管理后台</div>
    <button class="nav-btn" v-if="login" @click="$router.push('/')">商户登录</button>
    <button class="nav-btn" v-else-if="regist" @click="$router.push('/regist')">商户注册</button>
    <button class="nav-btn" v-else @click="outLogin">退出登录</button>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        login: false,
        regist: false
      }
    },
    methods: {
      outLogin () {
        this.$router.go(-1)
      }
    },
    mounted () {
      this.login = this.$el.hasAttribute('login')
      this.regist = this.$el.hasAttribute('regist')
    }
  }
</script>
